<template>
	<view>
		<view class="all-body" v-if="show">
			<view class="information">
				<image class="avatar" :src="avatarUrl" mode="aspectFill" alt=""></image>
				<view class="name">
					<text class="name-style">{{userInfo.name}}</text>
				</view>
				<view class="age-sex-nation">
					<text class="ASN-style">{{userInfo.age}}岁，</text>
					<text class="ASN-style" v-if="userInfo.sex===1">男，</text>
					<text class="ASN-style" v-else>女，</text>
					<text class="ASN-style">{{userInfo.ethnic}}</text>
				</view>
				<image class="edit" :src="this.getimageBaseUrl('编辑.png')" @click="edit()"></image>
				<view class="info">
					<view class="info-body">
						<view class="info-left">
							<text class="left">职业：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.vocation}}</text>
						</view>
					</view>
					<view class="info-body">
						<view class="info-left">
							<text class="left">电话号码：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.phone}}</text>
						</view>
					</view>
					<view class="info-body">
						<view class="info-left">
							<text class="left">家庭住址：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.homeAddress}}</text>
						</view>
					</view>
					<view class="info-body">
						<view class="info-left">
							<text class="left">公司地址：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.comAddress}}</text>
						</view>
					</view>
					<view class="info-body">
						<view class="info-left">
							<text class="left">身份证号：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.idCard}}</text>
						</view>
					</view>

				</view>
			</view>
			<view class="skills">
				<u-collapse>
					<u-collapse-item title-border="none" border="false" title="特长技能"
						style="font-size: 16px;font-weight: 600;">
						<view class="skill-tab">
							<view class="tab" v-for="(item,index) in userInfo.speciality" :key="index">
								<!-- <text class="tab-text">{{item.name}}</text> -->
								<text class="tab-text">{{item.name}}</text>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
			<view class="ceritfys">
				<u-collapse>
					<u-collapse-item title="证书">
						<view>
							<u-swiper :list="userInfo.certify" :height="200" imgMode="aspectFill" keyName="imageUrl"
								:autoplay="false" circular></u-swiper>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<!--表单 -->
		<view class="form" v-else>
			<u--form labelWidth="70" labelAlign="center" labelPosition="left" :model="form" ref="form">
				<u-form-item label="姓名" prop="form.name" borderBottom required>
					<u--input @focus="this.showNameError = false" v-model="form.name" clearable></u--input>
					<view v-if="showNameError" class="message">
						请入姓名！
					</view>
				</u-form-item>

				<u-form-item label="职业" prop="form.vocation">
					<u--input v-model="form.vocation" clearable></u--input>
				</u-form-item>

				<u-form-item label="民族" prop="form.ethnic" required>

					<u-picker :show="selectShow" :columns="columns" keyName="name" @cancel="this.selectShow = false"
						@confirm="ethnicConfirm">
					</u-picker>
					<view class="picker" @click="this.selectShow = true">
						{{form.ethnic === null ? '请选择民族' : form.ethnic}}
					</view>
				</u-form-item>

				<u-form-item label="电话号码" prop="form.phone" required>
					<u--input v-model="form.phone" @focus="this.showPhoneError = false" clearable></u--input>
					<view v-if="showPhoneError" class="message">
						{{phoneErrorMessage}}
					</view>
				</u-form-item>

				<u-form-item label="家庭住址" prop="form.homeAddress">
					<u--input v-model="form.homeAddress" clearable></u--input>
				</u-form-item>
				<view style="margin-left: 20%;">
					<u-row>
						<u-col :span="5">
							<u-button type="primary" text="点击选择住址" @click="chooseAddress"></u-button>
						</u-col>
					</u-row>
				</view>


				<u-form-item label="公司地址" prop="form.comAddress">
					<u--input v-model="form.comAddress" clearable></u--input>
				</u-form-item>

				<u-form-item label="身份证号" prop="form.idCard" required>
					<u--input v-model="form.idCard" @focus="this.showIdCardError = false" clearable></u--input>
					<view v-if="showIdCardError" class="message">
						{{idCardErrorMessage}}
					</view>
				</u-form-item>

				<u-form-item label="特长" prop="form.speciality" v-if="form.speciality.length === 0">
					<u-row>
						<u-col :span="5">
							<u-button type="primary" text="添加特长" @click="addSpeciality"></u-button>
						</u-col>
					</u-row>
				</u-form-item>
				<!-- 特长框 -->
				<view class="speciality-box" v-else>
					<view class="speciality-box-item" v-for="(item, index) in form.speciality" :key="index">
						<view class="input">
							<u--input placeholder="请输入特长类型" clearable v-model="item.type"
								@focus="specialityTypefocus(index)">
							</u--input>
						</view>
						<!-- 特长类型提示框 -->
						<view class="specialityType-box"
							v-if="activeSpecialityTypeIndex === index && showSpecialityTypeBox">

							<view class="specialityType-box-item" v-for="specialityTypeItem in specialityType"
								:key="specialityTypeItem.id" @click="specialityTypeBoxItem(specialityTypeItem)">
								{{specialityTypeItem.name}}
							</view>
						</view>
						<view class="input" v-if="item.type != ''">
							<u--input placeholder="请输入特长名称" clearable v-model="item.name"
								@focus="specialityNamefocus(index)">
							</u--input>
						</view>
						<!-- 特长名称提示框 -->
						<view class="specialityType-box"
							v-if="activeSpecialityNameIndex === index && showSpecialityNameBox">

							<view class="specialityType-box-item" v-for="specialityNameItem in specialityName"
								:key="specialityNameItem.id" @click="specialityNameBoxItem(specialityNameItem.name)">
								{{specialityNameItem.name}}
							</view>
						</view>
						<view class="input" v-if="item.name != ''">
							<u--input placeholder="请描述一下特长" clearable v-model="item.detail"></u--input>
						</view>
						<u-row>
							<u-col :span="3">
								<u-button type="primary" :plain="true" @click="deleteSpeciality(index)">删除</u-button>
							</u-col>
						</u-row>
					</view>

					<view style="margin-top: 10rpx;">
						<u-row>
							<u-col :span="4">
								<u-button type="warning" @click="addSpeciality">添加特长</u-button>
							</u-col>
						</u-row>
					</view>
				</view>

				<u-form-item label="证书" prop="form.certify" borderBottom v-if="form.certify.length === 0 ">
					<u-row>
						<u-col :span="5">
							<u-button type="primary" @click="addCertify" text="添加证书"></u-button>
						</u-col>
					</u-row>
				</u-form-item>
				<!-- 证书盒子 -->
				<view class="certify-box" v-else>
					<view class="certify-box-item" v-for="(item,index) in form.certify" :key="index">
						<view class="input">
							<u--input placeholder="请输入证书类型" clearable v-model="item.type"
								@focus="certifyTypefocus(index)"></u--input>
						</view>

						<!-- 证书类型提示框 -->
						<view class="certifyType-box" v-if="activeCertifyTypeIndex === index && showCertifyTypeBox">
							<view class="certifyType-box-item" v-for="certifyTypeItem in certifyType"
								:key="certifyTypeItem.id" @click="certifyTypeBoxItem(certifyTypeItem)">
								{{certifyTypeItem.name}}
							</view>
						</view>

						<view class="input">
							<u--input placeholder="请输入证书名称" clearable v-model="item.name" v-if="item.type != ''"
								@focus="certifyNamefocus(index)">
							</u--input>
						</view>

						<!-- 证书名称提示框 -->
						<view class="certifyType-box" v-if="activeCertifyNameIndex === index && showCertifyNameBox">

							<view class="certifyType-box-item" v-for="certifyNameItem in certifyName"
								:key="certifyNameItem.id" @click="certifyNameBoxItem(certifyNameItem.name)">
								{{certifyNameItem.name}}
							</view>
						</view>

						<view style="margin-top: 20rpx;" @click="cilckImg(index)">
							<u-upload @afterRead="afterRead" :previewFullImage="true" name="certify" :maxCount="1"
								width="250" height="150" uploadText="请上传证书">
								<image
									:src=" item.imageUrl === ''? 'https://localhost:8989/image/download?name=zs.png':item.imageUrl "
									mode="widthFix" style="width: 250px;height: 150px;"></image>
							</u-upload>
						</view>
						<u-row>
							<u-col :span="3">
								<u-button type="primary" :plain="true" @click="deleteCertify(index)">删除</u-button>
							</u-col>
						</u-row>
					</view>
					<view style="margin-top: 10rpx;">
						<u-row>
							<u-col :span="4">
								<u-button type="warning" @click="addCertify">添加证书</u-button>
							</u-col>
						</u-row>
					</view>
				</view>
				<view style="margin-top: 20rpx;">
					<u-row :gutter="20" justify="center">
						<u-col :span="3.5">
							<u-button color="#F56C6C" @click="cancelSubmit">取消</u-button>
						</u-col>
						<u-col :span="3.5">
							<u-button color="#5AC725" @click="submitFrom">提交</u-button>
						</u-col>
					</u-row>
				</view>
			</u--form>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				//记录当前用户选择的定位
				position: {
					// 定位的具体名称
					name: '成都工业学院',
					// 详细位置
					address: '四川省成都市郫都区中心大道二段一号',
					latitude: '29.58832234563708',
					longitude: '106.56436432812498',
				},
				userInfo: '',
				//用户头像
				avatarUrl: '',
				// 表单
				form: {
					id: 0,
					name: '',
					ethnic: '请选择民族',
					//职业
					vocation: '',
					phone: '',
					homeAddress: '',
					comAddress: '',
					idCard: '',
					speciality: [],
					certify: [],
					latitude: '29.58832234563708',
					longitude: '106.56436432812498',

				},

				//特长类型列表
				specialityType: [],

				//特长名称列表
				specialityName: [],

				//获取证书类型列表:,
				certifyType: [],

				//获取证书名称列表:,
				certifyName: [],

				//是否展示提特长类型示盒子
				showSpecialityTypeBox: false,

				//是否展示提特长名称示盒子
				showSpecialityNameBox: false,

				//是否展示提证书类型示盒子
				showCertifyTypeBox: false,

				//是否展示提证书名称示盒子
				showCertifyNameBox: false,

				//记录需要激活特长类型的小标
				activeSpecialityTypeIndex: 0,

				//记录需要激活特长名称的小标
				activeSpecialityNameIndex: 0,

				//记录需要激活特长类型的小标
				activeCertifyTypeIndex: 0,

				//记录需要激活特长名称的小标
				activeCertifyNameIndex: 0,

				// 当前点击图片的下标
				imgIndex: 0,

				// 表单校验规则
				showNameError: false,

				showPhoneError: false,
				phoneErrorMessage: '',

				showIdCardError: false,
				idCardErrorMessage: '',

				show: true,

				//控制现在民族的开关
				selectShow: false,
				columns: [
					[{
							id: '01',
							name: '汉族'
						},
						{
							id: '02',
							name: '蒙古族'
						},
						{
							id: '03',
							name: '满族'
						},
						{
							id: '04',
							name: '朝鲜族'
						},
						{
							id: '05',
							name: '赫哲族'
						},
						{
							id: '06',
							name: '达斡尔族'
						},
						{
							id: '07',
							name: '鄂温克族'
						},
						{
							id: '08',
							name: '鄂伦春族'
						},
						{
							id: '09',
							name: '回族'
						},
						{
							id: '10',
							name: '东乡族'
						},
						{
							id: '11',
							name: '土族'
						},
						{
							id: '12',
							name: '撒拉族'
						},
						{
							id: '13',
							name: '保安族'
						},
						{
							id: '14',
							name: '裕固族'
						},
						{
							id: '15',
							name: '维吾尔族'
						},
						{
							id: '16',
							name: '哈萨克族'
						},
						{
							id: '17',
							name: '柯尔克孜族'
						},
						{
							id: '18',
							name: '锡伯族'
						},
						{
							id: '19',
							name: '塔吉克族'
						},
						{
							id: '20',
							name: '乌孜别克族'
						},
						{
							id: '21',
							name: '俄罗斯族'
						},
						{
							id: '22',
							name: '塔塔尔族'
						},
						{
							id: '23',
							name: '藏族'
						},
						{
							id: '24',
							name: '门巴族'
						},
						{
							id: '25',
							name: '珞巴族'
						},
						{
							id: '26',
							name: '羌族'
						},
						{
							id: '27',
							name: '彝族'
						},
						{
							id: '28',
							name: '白族'
						},
						{
							id: '29',
							name: '哈尼族'
						},
						{
							id: '30',
							name: '傣族'
						},
						{
							id: '31',
							name: '傈僳族'
						},
						{
							id: '32',
							name: '佤族'
						},
						{
							id: '33',
							name: '拉祜族'
						},
						{
							id: '34',
							name: '纳西族'
						},
						{
							id: '35',
							name: '景颇族'
						},
						{
							id: '36',
							name: '布朗族'
						},
						{
							id: '37',
							name: '阿昌族'
						},
						{
							id: '38',
							name: '普米族'
						},
						{
							id: '39',
							name: '怒族'
						},
						{
							id: '40',
							name: '德昂族'
						},
						{
							id: '41',
							name: '独龙族'
						},
						{
							id: '42',
							name: '基诺族'
						},
						{
							id: '43',
							name: '苗族'
						},
						{
							id: '44',
							name: '布依族'
						},
						{
							id: '45',
							name: '侗族'
						},
						{
							id: '46',
							name: '水族'
						},
						{
							id: '47',
							name: '仡佬族'
						},
						{
							id: '48',
							name: '壮族'
						},
						{
							id: '49',
							name: '瑶族'
						},
						{
							id: '50',
							name: '仫佬族'
						},
						{
							id: '51',
							name: '毛南族'
						},
						{
							id: '52',
							name: '京族'
						},
						{
							id: '53',
							name: '土家族'
						},
						{
							id: '54',
							name: '黎族'
						},
						{
							id: '55',
							name: '畲族'
						},
						{
							id: '56',
							name: '高山族'
						},
					]
				],
			};
		},
		methods: {
			//选择家庭住址
			chooseAddress() {
				// console.log(this.position)
				uni.chooseLocation({
					success: function(res) {
						this.position = res
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.covers = [{
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '../../static/images/location.png', //地图上的图标
							width: 25, //宽
							height: 25, //高
							callout: { //自定义标记点上方的气泡窗口 点击有效  
								content: res.address, //文本
								color: '#ffffff', //文字颜色
								fontSize: 14, //文本大小
								borderRadius: 2, //边框圆角
								bgColor: '#00c16f', //背景颜色
								display: 'ALWAYS', //常显
								padding: 5 //气泡窗口的内间距
							},
						}]
					},
					fail(res) {
						// console.log("失败了")
						console.log(res)
					}
				});
				// console.log(this.position)
				this.form.homeAddress = this.position.address + this.position.name
				this.form.latitude = this.position.latitude
				this.form.longitude = this.position.longitude
			},
			//根据志愿者id 查询志愿者详细详细
			getUserDetail(id) {
				console.log(id)
				this.$request({
					 url: `${this.$baseUrl}/users/UDetail/${id}`
				}).then(res => {
					console.log(res)
					this.userInfo = res.data.data
					this.avatarUrl = uni.getStorageSync("userInfo").avatarUrl;
					this.form = this.userInfo
					console.log(this.userInfo)
				}).catch(res => {
					console.log(res)
				})
			},
			ethnicConfirm(e) {
				this.selectShow = false
				this.form.ethnic = e.value[0].name

			},
			//编辑
			edit() {
				this.show = false;
			},
			// 获取特长类列表
			getSpecialityTypeList() {
				this.$request({
						url: `${this.$baseUrl}/users/specialTypeList`,

					})
					.then(res => {
						this.specialityType = res.data.data
					})
					.catch(res => {
						console.log(res)

					})
			},

			//获取证书类型列表
			getCertifyTypeList() {
				this.$request({
						url: `${this.$baseUrl}/users/certifyTypeList`,

					})
					.then(res => {
						this.certifyType = res.data.data

					})
					.catch(res => {
						console.log(res)

					})
			},



			//添加特长
			addSpeciality() {
				this.form.speciality.push({
					id: 0,
					type: '',
					name: '',
					detail: '',
				})
			},

			//添加证书
			addCertify() {
				this.form.certify.push({
					id: 0,
					type: '',
					name: '',
					imageUrl: '',
				})
			},

			//特长类型获取焦点
			specialityTypefocus(index) {
				this.activeSpecialityTypeIndex = index
				this.showSpecialityTypeBox = true
			},

			//特长名称获取焦点	
			specialityNamefocus(index) {
				this.activeSpecialityNameIndex = index
				this.showSpecialityNameBox = true
			},

			//证书类型获取焦点
			certifyTypefocus(index) {
				this.activeCertifyTypeIndex = index
				this.showCertifyTypeBox = true
			},

			//证书名称获取焦点
			certifyNamefocus(index) {
				this.activeCertifyNameIndex = index
				this.showCertifyNameBox = true
			},

			// 选择被点击的类型
			specialityTypeBoxItem(specialityTypeItem) {
				this.form.speciality[this.activeSpecialityTypeIndex].type = specialityTypeItem.name
				this.showSpecialityTypeBox = false
				this.$request({
						url: `${this.$baseUrl}/users/specialList/${specialityTypeItem.id}`
					}).then(res => {
						this.specialityName = res.data.data
					})
					.catch(res => {
						console.log(res)
					})
			},

			// 选择被点击的特长名称
			specialityNameBoxItem(name) {
				this.showSpecialityNameBox = false
				this.form.speciality[this.activeSpecialityNameIndex].name = name
			},

			// 选择被点击的证书类型
			certifyTypeBoxItem(certifyTypeItem) {
				this.form.certify[this.activeCertifyTypeIndex].type = certifyTypeItem.name
				this.showCertifyTypeBox = false
				this.$request({
						url: `${this.$baseUrl}/users/certifyList/${certifyTypeItem.id}`
					}).then(res => {
						this.certifyName = res.data.data
					})
					.catch(res => {
						console.log(res)
					})
			},

			// 选择被点击的证书名称
			certifyNameBoxItem(name) {
				this.form.certify[this.activeCertifyNameIndex].name = name
				this.showCertifyNameBox = false
			},

			//删除特长
			deleteSpeciality(index) {
				this.form.speciality.splice(index, 1)
			},

			//删除证书
			deleteCertify(index) {
				this.form.certify.splice(index, 1)
			},

			//点击图片的下标
			cilckImg(index) {
				this.imgIndex = index
			},

			// 新增图片
			afterRead(even) {
				uni.uploadFile({
					url: `${this.$baseUrl}/image/upload`,
					filePath: even.file.url,
					name: 'file',
					success: (res) => {
						let json = JSON.parse(res.data)
						/* this.fileList.push({
						url: `${this.$baseUrl}/image/download?name=${json.data}`
						}) */
						this.form.certify[this.imgIndex].imageUrl =
							`${this.$baseUrl}/image/download?name=${json.data}`
					},
					fail: (res) => {
						console.log(res)
					}
				})


			},

			//表单校验
			formValidate() {
				//判断是否输入姓名
				if (this.form.name === '') {
					this.showNameError = true
				}

				//校验电话号码是否合法
				if (this.form.phone === '') {
					this.phoneErrorMessage = '请输入手机号'
					this.showPhoneError = true
				} else {
					if (!uni.$u.test.mobile(this.form.phone)) {
						this.showPhoneError = true
						this.phoneErrorMessage = '手机号格式错误'
					}
				}

				//校验身份证
				if (this.form.idCard === '') {
					this.idCardErrorMessage = '请输入身份证号'
					this.showIdCardError = true
				} else {
					if (!/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
						.test(
							this.form.idCard)) {
						this.showIdCardError = true
						this.idCardErrorMessage = '身份证号格式错误'
					}
				}
			},

			//提交表单
			submitFrom() {
				this.formValidate()

				//提交
				if (!(this.showIdCardError || this.showNameError || this.showPhoneError)) {

					this.$request({
						url: `${this.$baseUrl}/admin/updateByUser`,
						data: {
							userDTO: this.form
						},

						data: this.form,
						method: 'POST'

					}).then(res => {
						this.show = true
						/* this.form = {
							id: 0,
							name: '',
							ethnic: '请选择民族',
							//职业
							vocation: '',
							phone: '',
							homeAddress: '',
							comAddress: '',
							idCard: '510904199806233598',
							speciality: [],
							certify: [],
						} */
						this.showNameError = false
						this.showPhoneError = false
						this.showIdCardError = false
						uni.showToast({
							icon: 'success',
							title: '修改成功',
							duration: 2000
						});

					}).catch(res => {
						console.log(res)
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: '请完成校验项',
						duration: 2000
					});
				}

			},

			// 取消用户信息编辑
			cancelSubmit() {
				this.show = true
				this.form = this.userInfo
				this.showNameError = false
				this.showPhoneError = false
				this.showIdCardError = false
			},

		},

		onLoad(e) {

			//获取用户信息
			this.getUserDetail(e.id);

			// 获取特长类列表
			this.getSpecialityTypeList();

			// 获取证书类型列表
			this.getCertifyTypeList();
		},
	}
</script>

<style lang="scss">
	.all-body {
		position: relative;
		height: 1624rpx;
		width: 750rpx;
		overflow: hidden;
		opacity: 1;
		background-color: rgba(245, 245, 245, 1);

		.information {
			overflow: hidden;
			background-color: rgba(255, 255, 255, 1);
			width: 686rpx;
			min-height: 440rpx;
			margin-top: 32rpx;
			margin-left: 32rpx;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;

			.avatar {
				position: absolute;
				background: rgba(245, 245, 245, 1);
				margin-top: 32rpx;
				margin-left: 32rpx;
				border-radius: 100%;
				border: 4rpx solid #ffffff;
				height: 96rpx;
				width: 96rpx;
				// transform: translate(0, -50%);
			}

			.name {
				position: absolute;
				margin-top: 38rpx;
				margin-left: 152rpx;
				height: 46rpx;

				.name-style {
					font-size: 32rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					color: rgba(51, 51, 51, 1);
					text-align: left;
					vertical-align: top;
				}
			}

			.age-sex-nation {
				position: absolute;
				margin-top: 88rpx;
				margin-left: 152rpx;
				min-width: 174rpx;
				height: 34rpx;

				.ASN-style {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					color: rgba(153, 153, 153, 1);
					text-align: left;
					vertical-align: top;
				}
			}

			.edit {
				position: absolute;
				margin-top: 52rpx;
				margin-left: 598rpx;
				width: 56rpx;
				height: 56rpx;
			}

			.info {
				width: 686;
				margin-top: 160rpx;
				margin-bottom: 32rpx;
				padding-left: 32rpx;
				padding-right: 32rpx;

				.info-body {
					display: flex;
					width: 622rpx;
					min-height: 40rpx;
					margin-top: 16rpx;

					.info-right {
						width: 482rpx;

						.right {
							font-size: 28rpx;
							font-weight: 600;
							letter-spacing: 0rpx;
							line-height: 40rpx;
							color: rgba(51, 51, 51, 1);
							text-align: left;
							vertical-align: top;
						}
					}

					.info-left {
						width: 140rpx;

						.left {
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 40rpx;
							color: rgba(102, 102, 102, 1);
							text-align: left;
							vertical-align: top;
						}
					}
				}
			}
		}

		.skills {
			background-color: rgba(255, 255, 255, 1);
			width: 686rpx;
			min-height: 56rpx;
			margin-top: 32rpx;
			margin-left: 32rpx;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;

			.skill-tab {
				width: 622rpx;
				min-height: 56rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: flex-start;

				.tab {
					border-radius: 28rpx;
					margin-left: 16rpx;
					margin-bottom: 16rpx;
					background: rgba(90, 221, 158, 1);
					padding: 4px 12px 4px 12px;

					.tab-text {
						height: 40rpx;
						opacity: 1;
						display: flex;
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40rpx;
						color: rgba(255, 255, 255, 1);
						text-align: left;
					}
				}
			}
		}

		.ceritfys {
			background-color: rgba(255, 255, 255, 1);
			width: 686rpx;
			min-height: 56rpx;
			margin-top: 32rpx;
			margin-left: 32rpx;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
		}
	}

	.form {
		padding: 40rpx;

		.message {
			color: red;
			font-size: 26rpx;
		}

		.picker {
			border: 2rpx #D4D4D4 solid;
			height: 60rpx;
			border-radius: 10rpx;
			line-height: 60rpx;
			padding: 15rpx;
		}

		.speciality-box {
			margin-top: 10rpx;
			background-color: #f3f3f4;
			border: 2rpx solid #d0d0d1;
			padding: 15rpx;

			.speciality-box-item {
				background-color: #FFFFFF;
				padding: 15rpx;
				border: 2rpx solid #ddddde;
				margin-top: 30rpx;

				.specialityType-box {
					background-color: #FFFFFF;
					width: 60%;
					border: 2rpx solid #c4c5b6;

					.specialityType-box-item {
						padding: 15rpx;
						margin: 10rpx;
					}

					.specialityType-box-item:hover {
						color: #3C9CFF;
					}
				}

				.input {
					margin-bottom: 15rpx;
				}
			}
		}

		//证书
		.certify-box {
			margin-top: 20rpx;

			.certify-box-item {
				border: 2rpx solid #e1e2e3;
				padding: 20rpx;

				.certifyType-box {
					.certifyType-box-item {
						padding: 15rpx;
						margin: 10rpx;
					}

					.specialityType-box-item:hover {
						color: #3C9CFF;
					}
				}

				.input {
					margin-bottom: 15rpx;
				}
			}
		}

	}
</style>
